<template>
    <el-dialog :title="action == 'add' ? '新增' : '编辑'" :model-value="show" @update:model-value="handleValueUpdate"
        @close="handleClose">
        <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="上级菜单">
                        <el-tree-select v-model="form.parentId" :data="menuOptions"
                            :props="{ value: '_id', label: 'menuName', children: 'children' }" value-key="_id"
                            placeholder="选择上级菜单" check-strictly />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单类型" prop="menuType">
                        <el-radio-group v-model="form.menuType">
                            <el-radio value="M">目录</el-radio>
                            <el-radio value="C">菜单</el-radio>
                            <el-radio value="F">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F'">
                    <el-form-item label="菜单图标" prop="icon">
                        <el-popover placement="bottom-start" :width="540" trigger="click">
                            <template #reference>
                                <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
                                    <template #prefix>
                                        <!-- <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon"
                                            style="height: 32px;width: 16px;" />
                                        <span v-if="form.icon" style="margin-left: 8px;">{{ form.icon }}</span>
                                        <el-icon v-else style="height: 32px;width: 16px;">
                                            <search />
                                        </el-icon> -->
                                        <i :class="'iconfont icon-' + form.icon"></i>
                                    </template>
                                </el-input>
                            </template>
                            <menuIconSelect v-model="form.icon"></menuIconSelect>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示排序" prop="orderNum">
                        <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType == 'C'">
                    <el-form-item prop="routeName">
                        <template #label>
                            <span>
                                <el-tooltip
                                    content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）"
                                    placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                路由名称
                            </span>
                        </template>
                        <el-input v-model="form.routeName" placeholder="请输入路由名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F'">
                    <el-form-item>
                        <template #label>
                            <span>
                                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>是否外链
                            </span>
                        </template>
                        <el-radio-group v-model="form.isFrame">
                            <el-radio value="0">是</el-radio>
                            <el-radio value="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F'">
                    <el-form-item prop="path">
                        <template #label>
                            <span>
                                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                路由地址
                            </span>
                        </template>
                        <el-input v-model="form.path" placeholder="请输入路由地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType == 'C'">
                    <el-form-item prop="component">
                        <template #label>
                            <span>
                                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                组件路径
                            </span>
                        </template>
                        <el-input v-model="form.component" placeholder="请输入组件路径" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'M'">
                    <el-form-item>
                        <el-input v-model="form.menuCode" placeholder="请输入权限标识" maxlength="100" />
                        <template #label>
                            <span>
                                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
                                    placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                权限字符
                            </span>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType == 'C'">
                    <el-form-item>
                        <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
                        <template #label>
                            <span>
                                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                路由参数
                            </span>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType == 'C'">
                    <el-form-item>
                        <template #label>
                            <span>
                                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                是否缓存
                            </span>
                        </template>
                        <el-radio-group v-model="form.isCache">
                            <el-radio value="0">缓存</el-radio>
                            <el-radio value="1">不缓存</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'F'">
                    <el-form-item>
                        <template #label>
                            <span>
                                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                显示状态
                            </span>
                        </template>
                        <!-- <el-radio-group v-model="form.visible">
                            <el-radio v-for="dict in sys_show_hide" :key="dict.value" :value="dict.value">{{dict.label }}</el-radio>
                        </el-radio-group> -->
                        <el-radio-group v-model="form.visible">
                            <el-radio value="1">是</el-radio>
                            <el-radio value="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template #label>
                            <span>
                                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                菜单状态
                            </span>
                        </template>
                        <!-- <el-radio-group v-model="form.menuState">
                            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{dict.label}}</el-radio>
                        </el-radio-group> -->
                        <el-radio-group v-model="form.menuState">
                            <el-radio value="1">启用</el-radio>
                            <el-radio value="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, defineProps, getCurrentInstance, onMounted } from 'vue'
import menuIconSelect from "@/components/MenuIconSelect/index.vue";
const { proxy } = getCurrentInstance();
const $Tajax = proxy.$Tajax;
const open = ref(true)
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    menuOptions: {
        type: Array,
        default: () => []
    },
    action: {
        type: String,
        default: 'add'
    },
    Item: {
        type: Object,
        default: ''
    },

})
onMounted(() => {
    if (props.action == 'edit') {
        form.value = props.Item
    } else {
        form.value.parentId = props.Item ? props.Item._id : null
        console.log(form.value.parentId)
    }
})
const emit = defineEmits(['update:show'])

const menuRef = ref(null)

const form = ref({
    parentId: null,
    menuType: '',
    icon: '',
    orderNum: 0,
    menuName: '',
    routeName: '',
    isFrame: '1',
    path: '',
    component: '',
    menuCode: '',
    query: '',
    isCache: '0',
    visible: '0',
    menuState: '0'
})

const rules = ref({
    // 在这里添加表单验证规则
})

const submitForm = () => {
    menuRef.value.validate(async (valid) => {
        if (valid) {
            console.log(form.value)
            let params = { ...form.value, action: props.action };
            let res = await $Tajax.menuSubmit(params);
            console.log(res)
            proxy.$message.success("操作成功");
            emit('update:show', false)
            menuRef.value.resetFields()
        }
    })
}



const handleClose = () => {
    emit('update:show', false)
}
const showSelectIcon = () => {
    // 实现图标选择逻辑
}
const handleValueUpdate = (val) => {
    emit('update:show', val)
}
</script>

<style></style>